/* ====================================== button  ====================================== */
import React from 'react'
import { Button } from 'antd'
const Ask = window.$Lazy.load(()=>import('#tp/ask'))
// ===================================================================== 按钮集合
class Index extends React.Component{
	enter = e => {
		const { code, onClick } = this.props
		if(e.code === code || ( code==='Enter' && e.code === 'NumpadEnter')){
			onClick?.()
			e.preventDefault()
		}
	}
	componentDidMount(){
		if(this.props.code){
			window.addEventListener('keydown',this.enter)
		}
	}
	componentWillUnmount(){
		if(this.props.code){
			window.removeEventListener('keydown',this.enter)
		}
	}
	render(){
		const { type, size='small', code, icon, children, stop=true, label, danger, shape, width, minWidth, boxClassName, className, onClick, 
		loading, htmlType, disabled, style, ghost, round, full, tip, tipName, tabIndex } = this.props
		let height = {}
		let radius = round ? {borderRadius:'100px'} : {borderRadius: '3px'}
		if(size === 'x'){
			height = { height:'44px', fontSize:'16px'}
		}else if( size === 'small'){
			height = { height:'24px', fontSize:'12px'}
		}else if( size === 'middle'){
			height = { height:'30px', fontSize:'13px'}
		}
		let _label = label
		if(code && !htmlType){ _label += ' ' + code }
		
		const MyButton = ( ) => (
			<Button
				tabIndex	= { tabIndex }
				className	= {`${className||''} ${full?'ex':''}`} 
				style		= {{ width, minWidth, ...height, ...radius,  ...style }} 
				size		= { size || 'small' } 
				type		= { type || 'primary' } 
				loading		= { loading } 
				disabled	= { disabled } 
				onClick		= { e=>{
					if(stop) { e.stopPropagation() }
					onClick?.()
				} }
				htmlType 	= { htmlType }
				ghost 		= { ghost }
				icon 		= { icon }
				title		= { _label }
				shape		= { shape}
				danger		= { danger }
			>
				{_label||children}
				{
					(tip || tipName) && <span className='tip'><Ask top={-1} tip={tip} name={tipName} color='white' /></span>
				}
			</Button>
		)
		
		return (
			full ? <div className={`fxmc ${boxClassName||''}`}><MyButton/></div> : <MyButton />
		)
	}
}

export default Index